<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/第一组.css"/>
</head>
<body>
	<div class="contain">
		<h2><span>第一组</span></h2>
		<ul>
			<li>
				<div class="port-1 effect-1">
					<div class="image-box">
						<img src="img/60ab38d2b6d84716555f3881cc1996ef.jpg"/>
					</div>
					<div class="text-desc">
						<h3>第一个效果</h3>
						<p>当鼠标处于悬停状态时，文字遮罩从上往下移动，背景图片略大</p>
						<a href="#" class="btn">learn more</a>
					</div>
				</div>
			</li>
			<li>
				<div class="port-1 effect-1">
					<div class="image-box">
						<img src="img/60ab38d2b6d84716555f3881cc1996ef.jpg"/>
					</div>
					<div class="text-desc">
						<h3>第一个效果</h3>
						<p>当鼠标处于悬停状态时，文字遮罩从上往下移动，背景图片略大</p>
						<a href="#" class="btn">learn more</a>
					</div>
				</div>
			</li>
			<li>
				<div class="port-1 effect-1">
					<div class="image-box">
						<img src="img/60ab38d2b6d84716555f3881cc1996ef.jpg"/>
					</div>
					<div class="text-desc">
						<h3>第一个效果</h3>
						<p>当鼠标处于悬停状态时，文字遮罩从上往下移动，背景图片略大</p>
						<a href="#" class="btn">learn more</a>
					</div>
				</div>
			</li>
		</ul>
	</div>
</body>
</html>